<template>
    <div class="squares">
        <ul class="bg-squares">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</template>
<script>
export default {
    name:'SquaresAnimation'
}
</script>
<style scoped>
    .squares{
        height: 100vh;
        display: flex;
        box-sizing: border-box;
        overflow: hidden;

    }
    .bg-squares{
        list-style: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        margin: 0;
        padding: 0;
    }
    .bg-squares li{
        width: 40px;
        height: 40px;
        background-color: #64609E;
        position: absolute;
        animation: squares 20s linear infinite;
    }
    .bg-squares li:nth-child(2){
        left: 20%;
        width: 80px;
        height: 80px;
        animation-duration: 8s;
        bottom: 160px;
    }
    .bg-squares li:nth-child(3){
        left: 30%;
        bottom: 60px;
    }
    .bg-squares li:nth-child(4){
        left: 40%;
        width: 60px;
        height: 60px;
        bottom: 120px;
        opacity: .7;
        animation-duration: 10 s;
    }
    .bg-squares li:nth-child(5){
        left: 70%;
        bottom: 80px;
        animation-duration: 5s;
    }
    .bg-squares li:nth-child(6){
        left: 8%;
        width: 120px;
        height: 120px;
        bottom: 0px;
        opacity: .6;
    }
    .bg-squares li:nth-child(7){
        left:76%;
        width: 160px;
        height: 160px;
        bottom: 140px;
        animation-duration: 7s;
        opacity: .7;
    }
    .bg-squares li:nth-child(8){
        left: 15%;
        width: 20px;
        height: 20px;
        bottom: 500px;
        opacity: .8;
        animation-duration: 20s;
    }
    .bg-squares li:nth-child(9){
        left: 65%;
        width: 35px;
        height: 35px;
        bottom: 700px;
        animation-duration: 8s;
    }
    .bg-squares li:nth-child(10){
        left: 90%;
        width: 44px;
        height: 44px;
        bottom: 400px;
        opacity: .5;
        animation-duration: 10s;
    }
    .bg-squares li:nth-child(11){
        left: 5%;
        width: 33px;
        height: 33px;
        bottom: 20px;
        opacity: .7;
        animation-duration: 10s;
    }
    .bg-squares li:nth-child(12){
        left: 8%;
        width: 44px;
        height: 44px;
        bottom: 140px;
        opacity: .3;
        animation-duration: 13s;
    }
    @keyframes squares {
        0%{
            transform: translateY(0);
        }
        100%{
            transform: translateY(-120vh) rotate(600deg);
        }
    }
</style>
